<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="移动端监控">
    <title>移动端监控</title>

    <script language="javascript" type="text/javascript" src="assets/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="assets/jquery.flot.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 要绘制的数据和数据的数据点数
            var data = [], totalPoints = 300;
            var data1 = [];
            var data_wcxy = [];
            var data_mbb = [];
            var data_hxb = [];
            // 获得一些随机数据
            function getRandomData() {
                if (data.length > 0)
                    data = data.slice(1);
                while (data.length < totalPoints) {
                    var prev = data.length > 0 ? data[data.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;
                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;
                    data.push(y);
                }
                var res = [];
                for (var i = 0; i < data.length; ++i)
                    res.push([i, data[i]])
                return res;
            }

            // 获得一些随机数据
            var index = 0;

            function getRandomData1() {

                //console.log('循环进来了');


                if (data1.length > 0)
                    data1 = data1.slice(1);

                var show_y = [
                    23, 24, 25, 26, 27, 28, 29, 30,
                    29, 28, 27, 26, 25,
                    26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44,
                    42, 40, 38, 36, 34, 32, 30, 20, 21, 20, 19, 18, 17, 16, 15,
                    20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
                ];

                if (index > show_y.length - 1) {
                    index = 0;
                }


                while (data1.length < totalPoints) {

                    var prev = data1.length > 0 ? data1[data1.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;

                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;

                    if (data1.length < totalPoints - 1)
                        data1.push(20);
                    else
                        data1.push(show_y[index++]);

                }

                var res = [];
                for (var i = 0; i < data1.length; ++i)
                    res.push([i, data1[i]])
                return res;
            }

            // 获得一些随机数据
            var index_wcxy = 0;

            function getRandomData_wcxy() {

                if (data_wcxy.length > 0)
                    data_wcxy = data_wcxy.slice(1);

                var show_y = [
                    21, 22, 23, 24, 25, 26, 25, 24, 23, 22, 21,
                    22, 24, 27, 30, 27, 24, 22, 5,
                    20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
                    22, 23, 24, 22, 21
                ];

                if (index_wcxy > show_y.length - 1) {
                    index_wcxy = 0;
                }


                while (data_wcxy.length < totalPoints) {

                    var prev = data_wcxy.length > 0 ? data_wcxy[data_wcxy.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;

                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;

                    if (data_wcxy.length < totalPoints - 1)
                        data_wcxy.push(20);
                    else
                        data_wcxy.push(show_y[index_wcxy++]);

                }

                var res = [];
                for (var i = 0; i < data_wcxy.length; ++i)
                    res.push([i, data_wcxy[i]])
                return res;
            }

            // 获得一些随机数据
            var index_mbb = 0;

            function getRandomData_mbb() {

                //console.log('循环进来了');


                if (data_mbb.length > 0)
                    data_mbb = data_mbb.slice(1);

                var show_y = [
                    20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
                    21, 22, 50, 49, 48, 47, 46, 45, 44, 43, 42, 30, 31, 32, 33, 34, 35, 34, 33, 32, 31, 30,
                    29, 28, 27, 26, 25, 24, 23, 22, 21, 20
                ];

                if (index_mbb > show_y.length - 1) {
                    index_mbb = 0;
                }


                while (data_mbb.length < totalPoints) {

                    var prev = data_mbb.length > 0 ? data_mbb[data_mbb.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;

                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;

                    if (data_mbb.length < totalPoints - 1)
                        data_mbb.push(20);
                    else
                        data_mbb.push(show_y[index_mbb++]);

                }

                var res = [];
                for (var i = 0; i < data_mbb.length; ++i)
                    res.push([i, data_mbb[i]])
                return res;
            }

            // 获得一些随机数据
            var index_hxb = 0;

            function getRandomData_hxb() {

                //console.log('循环进来了');


                if (data_hxb.length > 0)
                    data_hxb = data_hxb.slice(1);

                var show_y = [];

                for (var i = 0; i <= 90; i++) {
                    var hudu = (2 * Math.PI / 360) * 6 * i;
                    show_y.push(Math.cos(hudu) * 15 + 20);
                }
                for (var i = 90; i >= 0; i--) {
                    var hudu = (2 * Math.PI / 360) * 6 * i;
                    show_y.push(Math.cos(hudu) * 15 + 20);
                }


                if (index_hxb > show_y.length - 1) {
                    index_hxb = 0;
                }


                while (data_hxb.length < totalPoints) {

                    var prev = data_hxb.length > 0 ? data_hxb[data_hxb.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;

                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;

                    if (data_hxb.length < totalPoints - 1)
                        data_hxb.push(20);
                    else
                        data_hxb.push(show_y[index_hxb++]);

                }

                var res = [];
                for (var i = 0; i < data_hxb.length; ++i)
                    res.push([i, data_hxb[i]])
                return res;
            }

            var updateInterval = 50; // 刷新间隔
            var updateInterval2 = 10; // 刷新间隔
            var updateInterval_wcxy = 20; // 刷新间隔
            var updateInterval_mbb = 40; // 刷新间隔
            var updateInterval_hxb = 30; // 刷新间隔

            // 设置绘图参数
            var options = {
                series: {shadowSize: 0}, // 绘制线的阴影，不绘制设置 0
                yaxis: {min: 0, max: 100}, // Y 轴的最大值最小值
                xaxis: {show: false} // 不显示 X 轴
            };
//            var dataset = [
//                { label: "CP1U", data:  getRandomData() , color: "#00FF00" },
//                { label: "CP2U", data:  getRandomData1() , color: "#00FFFF" }
//            ];

            var dataset = [
                {label: "脑波", data: getRandomData(), color: "#FDFF2B"}
            ];
            var dataset2 = [
                {label: "心率", data: getRandomData1(), color: "#F00"}
            ];
            var dataset_wcxy = [
                {label: "无创血压", data: getRandomData_wcxy(), color: "#34FF1C"}
            ];
            var dataset_mbb = [
                {label: "脉搏波", data: getRandomData_mbb(), color: "#1B06FF"}
            ];
            var dataset_hxb = [
                {label: "呼吸波", data: getRandomData_hxb(), color: "#FF460E"}
            ];

            // 绘图对象 参数为：绘制地点、数据、属性
            var plot = $.plot($("#placeholder"), dataset, options); // 脑波
            var plot2 = $.plot($("#placeholder2"), dataset2, options); // 心率
            var plot_wcxy = $.plot($("#placeholder_wcxy"), dataset_wcxy, options); // 无创血压
            var plot_mbb = $.plot($("#placeholder_mbb"), dataset_mbb, options); // 脉搏波
            var plot_hxb = $.plot($("#placeholder_hxb"), dataset_hxb, options); // 呼吸波

            function update() {
                // 要实现动态绘图，只需重新设置其数据即可
                //plot.setData([ getRandomData() ]); // 设置数据
//                dataset = [
//                    { label: "CP1U", data:  getRandomData() , color: "#00FF00" },
//                    { label: "CP2U", data:  getRandomData1() , color: "#00FFFF" }
//                ];

                dataset = [
                    {label: "脑电波", data: getRandomData(), color: "#FDFF2B"}
                ];


                plot.setData(dataset);
                // 轴线不改变，不用调用 plot.setupGrid()
                plot.draw();
                // 设置调用
                setTimeout(update, updateInterval);
            }

            function update2() {
                // 要实现动态绘图，只需重新设置其数据即可
                dataset = [
                    {label: "心率", data: getRandomData1(), color: "#F00"}
                ];


                plot2.setData(dataset);
                // 轴线不改变，不用调用 plot.setupGrid()
                plot2.draw();
                // 设置调用
                setTimeout(update2, updateInterval2);
            }

            function update_wcxy() {
                // 要实现动态绘图，只需重新设置其数据即可
                dataset = [
                    {label: "无创血压", data: getRandomData_wcxy(), color: "#34FF1C"}
                ];


                plot_wcxy.setData(dataset);
                // 轴线不改变，不用调用 plot.setupGrid()
                plot_wcxy.draw();
                // 设置调用
                setTimeout(update_wcxy, updateInterval_wcxy);
            }

            function update_mbb() {
                // 要实现动态绘图，只需重新设置其数据即可
                dataset = [
                    {label: "脉搏波", data: getRandomData_mbb(), color: "#1B06FF"}
                ];


                plot_mbb.setData(dataset);
                // 轴线不改变，不用调用 plot.setupGrid()
                plot_mbb.draw();
                // 设置调用
                setTimeout(update_mbb, updateInterval_mbb);
            }

            function update_hxb() {
                // 要实现动态绘图，只需重新设置其数据即可
                dataset = [
                    {label: "呼吸波", data: getRandomData_hxb(), color: "#FF460E"}
                ];


                plot_hxb.setData(dataset);
                // 轴线不改变，不用调用 plot.setupGrid()
                plot_hxb.draw();
                // 设置调用
                setTimeout(update_hxb, updateInterval_hxb);
            }

            // 加载调用
            update();
            update2();
            update_wcxy();
            update_mbb();
            update_hxb();
        });

        setInterval(function () {
            $('#heartValue').text(Math.floor(Math.random() * 200 + 40));
        }, 1000);

        setInterval(function () {
            $('#WcxyValue').text(Math.floor(Math.random() * 100 + 50));
        }, 1000);

        setInterval(function () {
            $('#WbbValue').text(Math.floor(Math.random() * 200 + 40));
        }, 1000);

        setInterval(function () {
            $('#hxbValue').text(Math.floor(Math.random() * 200 + 40));
        }, 1000);

        setInterval(function () {
            $('#temperatureValue').text(Math.floor(35+Math.random()*(42-35+1)));
        }, 1000);

    </script>
</head>
<body>
<div id="placeholder" style="width:100%;height:200px;background-color:#000"></div>
<div style="width:100%;height:80px;background-color: #000;color:#fff;font-size:20px;">
    <div style="padding:10px">
        <div style="float:left;width:40%">抑制：<span style="color:#FDFF2B">20</span></div>
        <div style="float:right;width:40%">信号：<span style="color:#FDFF2B">30</span></div>
    </div>
    <div style="padding:10px">
        <div style="float:left;width:40%">白电极：<span style="color:#FDFF2B">10</span></div>
        <div style="float:right;width:40%">黑点极：<span style="color:#FDFF2B">20</span></div>
    </div>
</div>
<div id="placeholder2" style="width:100%;height:200px;background-color:#000"></div>
<div style="width:100%;height:80px;line-height:80px;background-color: #000;color:#fff">
    <div style="width:100%;text-align:center;font-size:32px">
        心率：<span style="color:#f00" id="heartValue">0</span>
    </div>
</div>
<div id="placeholder_wcxy" style="width:100%;height:200px;background-color:#000"></div>
<div style="width:100%;height:80px;line-height:80px;background-color: #000;color:#fff">
    <div style="width:100%;text-align:center;font-size:32px">
        无创血压：<span style="color:#34FF1C" id="WcxyValue">0</span><span style="color:#34FF1C">/</span><span
            style="color:#34FF1C">80</span>
    </div>
</div>
<div id="placeholder_mbb" style="width:100%;height:200px;background-color:#000"></div>
<div style="width:100%;height:80px;line-height:80px;background-color: #000;color:#fff">
    <div style="width:100%;text-align:center;font-size:32px">
        心率：<span style="color:#1B06FF" id="WbbValue">0</span>
    </div>
</div>
<div id="placeholder_hxb" style="width:100%;height:200px;background-color:#000"></div>
<div style="width:100%;height:80px;background-color: #000;color:#fff">
    <div style="width:49%;height:75px;float:left;position: relative;border:solid 1px #f00">
        <div style="position:absolute;top:0px;left:0px;height:24px;"><span>呼吸率</span></div>
        <div style="position:absolute;color:#f00;left:80px;top:20px;font-size:24px" id="hxbValue">0</div>
    </div>
    <div style="width:49%;height:75px;float:right;position: relative;border:solid 1px #f00">
        <div style="position:absolute;top:0px;left:0px;height:24px;"><span>体温</span></div>
        <div style="position:absolute;color:#f00;left:80px;top:20px;font-size:24px" id="temperatureValue">0</div>
    </div>
</div>
</body>
</html>